<template>
  <el-table :data="tableData" >
     <el-table-column
     show-overflow-tooltip
        prop="id"
        label="产品ID"
        width="80">
      </el-table-column>
      <el-table-column
      show-overflow-tooltip
        prop="title"
        label="产品名称"
        width="150"
        >
      </el-table-column>
      <el-table-column
      show-overflow-tooltip
        prop="image"
        label="图片地址"
        width="100"
        >
      </el-table-column>
      <el-table-column
      show-overflow-tooltip
        prop="sellPoint"
        label="产品卖点"
        width="200"
        >
      </el-table-column>
      <el-table-column
      show-overflow-tooltip
        prop="price"
        label="产品价格"
        width="80">
      </el-table-column>
      <el-table-column
      show-overflow-tooltip
        prop="cid"
        label="产品类目"
        width="80">
      </el-table-column>
      <el-table-column
      show-overflow-tooltip
        prop="num"
        label="产品库存"
        width="80">
      </el-table-column>
      <el-table-column
      show-overflow-tooltip
        prop="descs"
        label="产品描述"
        width="280"
        >
        <template slot-scope="scope">
          <div v-html="scope.row.descs"></div>
        </template>
      </el-table-column>
       <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import api from '../../api'
export default {
  data(){
    return{
      tableData:[]
    }
  },
  mounted(){
    this.http(1)
    this.$bus.$on('onPage',val=>{
    this.http(val)
    })
    this.$bus.$on("onRefresh",val=>{
      this.http(1)
    })
    this.$bus.$on('onSearch',search=>{
      api.search({search}).then(res=>{
        if(res.status===200){
          if(res.data.code===200){
            this.tableData=res.data.result
          }
        }else{
          console.log(res.data.msg);
        }
      })
    })
  },
  methods:{
    http(page){
      api.selectTbItemAllByPage({page}).then(res=>{
      console.log(res.data);
      if(res.status===200){
        if(res.data.code===200){
          this.tableData=res.data.result
        }
      }
    })
    },
    /* 编辑事件 */
    handleEdit(index,row){
      this.$bus.$emit('onEditorDialog',row)
    },
    /* 删除事件 */
    handleDelete(index,row){
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           api.deleteItemById({
            id:row.id
          }).then(res=>{
            if(res.data.code===200){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.http(1)
            }else{
              this.$message({
                type: 'warning',
                message: '删除失败'
              });  
            }
          }).catch(err=>{
            console.log(err);
          })
          
        }).catch(() => {
                this.$message({
                type: 'warning',
                message: '删除失败'
              });    
        });
    }
  }
}
</script>

<style>

</style>